<template>
  <div id="data-view">
    <dv-full-screen-container>
      <title-between title="大屏可视化" />
      <dv-border-box-13 class="layout-base-container-example">
        <cmp-table></cmp-table>
        <cmp-pagination />
        <cmp-dialog title="弹窗标题部分">
          <div>这是一段内容</div>
        </cmp-dialog>
        <!-- <el-table :data="tableData"
                  style="width: 100%"
                  :cell-style="cellStyle"
                  :row-style="rowStyle"
                  :header-row-style="headerRowStyle"
                  :header-cell-style="headerCellStyle">
          >
          <el-table-column prop="date"
                           label="日期"
                           width="180">
          </el-table-column>
          <el-table-column prop="name"
                           label="姓名"
                           width="180">
          </el-table-column>
          <el-table-column prop="address"
                           label="地址">
          </el-table-column>
        </el-table> -->
      </dv-border-box-13>
    </dv-full-screen-container>
  </div>
</template>

<script>
import TitleBetween from "@/components/common/title/TitleBetween.vue";
import CmpTable from "@/components/common/table/CmpTable.vue";
import CmpDialog from "@/components/common/dialog/CmpDialog.vue";
import CmpPagination from "@/components/common/pagination/CmpPagination";
export default {
  name: "datav3",
  components: {
    TitleBetween,
    CmpTable,
    CmpDialog,
    CmpPagination
  },
  data() {
    return {
      tableData: [
        {
          date: "2021-09-26",
          name: "like",
          address: "天府三街"
        },
        {
          date: "2021-09-26",
          name: "like",
          address: "天府三街"
        },
        {
          date: "2021-09-26",
          name: "like",
          address: "天府三街"
        },
        {
          date: "2021-09-26",
          name: "like",
          address: "天府三街"
        }
      ]
    };
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {},
  watch: {}
};
</script>

<style lang="scss">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("../../assets/img/bg.png");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }
  .layout-base-container-example {
    height: calc(100% - 80px);
    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
    }
  }
}
</style>
